import { useState, useEffect, useCallback } from 'react'
import { View, ScrollView } from '@tarojs/components'
import { Empty } from '@nutui/nutui-react-taro'
import Taro from '@tarojs/taro'
import {
  IHeaderBox,
  IPieRoseTypeCharts,
  IUserItem,
  IloadMore
} from '@/components/index'
import { detailClass, CirChartStat } from '@/axios/exam'

import './index.scss'

interface AOVIndexProps {
  // onRef: any;
}

interface FormDataProps {
  pageNum: number
  pageSize: number
  status: number
}

const statusMap: API.OptionItem[] = [
  { label: '已完成', value: 1 },
  { label: '未完成', value: 2 }
]

const AOVIndex: React.FC<AOVIndexProps> = () => {
  const [listData, setListData] = useState<API.ExamDetailClassItem[]>([])
  const [chartData, setChartData] = useState<API.ChartStatItem[]>([])
  const [formData, setFormData] = useState<FormDataProps>({
    pageNum: 1,
    pageSize: 10,
    status: 1
  })
  const [loadStatus, setLoadStatus] = useState<API.LoadStatusProps>('more')
  const [otherInfo, setOtherInfo] = useState<
    Pick<API.TableResProps<null>, 'pages'>
  >({
    pages: 1
  })

  const [triggered, setTriggered] = useState<boolean>(false)

  const handleChangeStatus = (value: number) => {
    setFormData({
      pageNum: 1,
      pageSize: 10,
      status: value
    })
    setListData([])
  }

  const getListData = useCallback(async () => {
    try {
      if (formData.pageNum > 1) setLoadStatus('loading')
      const { list = [], ...other } = await detailClass({ ...formData })
      if (formData.pageNum == 1) {
        setListData(list)
      } else {
        setListData(preState => [...preState, ...list])
      }
      setLoadStatus(other.pages > formData.pageNum ? 'more' : 'noMore')
      setOtherInfo(other)
      setTriggered(false)
    } catch {}
  }, [formData])

  const getChartData = async () => {
    try {
      const results = await CirChartStat()
      setChartData(results)
    } catch {}
  }

  const onRefresh = () => {
    getChartData()
    setTriggered(true)
    setFormData({
      pageNum: 1,
      pageSize: 10,
      status: 1
    })
  }

  useEffect(() => {
    getListData()
  }, [getListData])

  useEffect(() => {
    getChartData()
  }, [])

  // useImperativeHandle(props.onRef, () => ({
  //   init,
  // }));

  const handlerBottom = () => {
    if (otherInfo.pages == formData.pageNum) {
      setLoadStatus('noMore')
    } else {
      setFormData({
        ...formData,
        pageNum: formData.pageNum + 1
      })
      setLoadStatus('loading')
    }
  }

  const handleClickUser = (id: number) => {
    Taro.navigateTo({
      url: `/pages/classMgt/infoCheck/examDetail/index?id=${id}`
    })
  }

  return (
    <ScrollView
      scrollY
      className='scrollview'
      onRefresherRefresh={onRefresh}
      enableBackToTop
      refresherEnabled
      refresherTriggered={triggered}
      scrollWithAnimation
      onScrollToLower={handlerBottom}
    >
      <View className='common_page'>
        <View className='card_box chart_box'>
          <IHeaderBox title='测评概览' />
          <IPieRoseTypeCharts
            data={chartData}
            fieldNames={{ label: 'name', value: 'totalNum' }}
          />
        </View>
        <View className='card_box data_box'>
          <IHeaderBox
            title='数据详情'
            options={statusMap}
            current={formData.status}
            handleClick={handleChangeStatus}
          />
          <View className='data_info'>
            {listData.length > 0 ? (
              <>
                {listData.map((item: API.ExamDetailClassItem) => (
                  <IUserItem
                    key={item.userName}
                    sourceData={item}
                    handleClick={() => handleClickUser(item.userId)}
                  />
                ))}
                <IloadMore loadStatus={loadStatus} />
              </>
            ) : (
              <Empty imageSize={120} />
            )}
          </View>
        </View>
      </View>
    </ScrollView>
  )
}

export default AOVIndex
